<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_计算属性和监视</title>
</head>
<body>
<!--
1. 计算属性
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算
-->
<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>读取多次fullName1值</p>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
  <p>计算属性存在缓存，多次读取只执行一次</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({
    el: '#demo',
    data: {
      firstName: 'A',
      lastName: 'B',
      fullName2: 'A B'
    },
    computed:{ //计算属性
      // 什么时候执行：初始化显示；相关data属性数据发生改变
      // 计算并返回当前属性值
      fullName1 (){ //计算属性中的一个方法，方法的返回值作为属性值
        console.log('调用fullName1()了')
        return this.firstName +' '+ this.lastName
      },
      fullName3: {
        get(){ // 回调函数 当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性值
          return this.firstName +' '+this.lastName
        },
        set(val){ // 当属性值发生改变时回调，更新相关属性数据
          var names = val.split(' ') // 将val分割成字符串数组：firstName、lastName
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },
    watch: { // 配置监视
      firstName: function (newVal, oldVal) {// firstName发生了变化
        this.fullName2 = newVal +' '+ this.lastName
      }
    }
  })
  vm.$watch('lastName', function (newVal,oldVal) {
    // 更新fullName2
    this.fullName2 = this.firstName +' '+newVal
  })
</script>
</body>
</html>
